import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import { Icon, Table } from 'antd';
import { getColumns } from '../../common/columns';
import globalStyles from '../../style/common.less';

const modalRoot = document.getElementById('dialog-root');

class TablePanel extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('table_panel');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  render() {
    const { style, title, dataList, dataConfig, parentDataConfig, width, height } = this.props;
    const { id, unit } = dataConfig;
    const { id: parentId, uniqueKey } = parentDataConfig;
    const dtTitle = unit ? `${title} （单位：${unit}）` : `${title}`;
    const columnDefine = getColumns(parentId).filter(
      item => item.key === uniqueKey || item.key === id
    );

    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          // boxShadow:' -10px 0px 15px rgba(78,166,240,0.23) inset, 0px -10px 15px rgba(78,166,240,0.23) inset, 10px 0px 15px rgba(78,166,240,0.23) inset,  0px 10px 15px rgba(78,166,240,0.23) inset'
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15,fontWeight: 'bold' }}>
            <div
              style={{
                float: 'left',
                width: 5,
                height: 35,
                marginRight: 10,
                backgroundColor: 'rgba(63,177,277,1)',
              }}
            />
            {dtTitle}
          </div>
          <div style={{ float: 'right', marginRight: 8 }}>
            {/* <Icon
              type="close"
              className={`${globalStyles.cursor_style_pointer}`}
              style={{ fontSize: 18 }}
              onClick={this.props.onClose}
            /> */}
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <Table
            style={{ backgroundColor: 'rgba(0,0,0,0)', color: '#fff' }}
            size="middle"
            dataSource={dataList}
            columns={columnDefine}
            pagination={false}
            rowKey="regionCode"
            scroll={{ y: height - 85 }}
          />
        </div>
      </div>,
      this.el
    );
  }
}

export default TablePanel;
